import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QtQml 2.2

Rectangle {
    id:root;
    color: "white";
    visible: true;
    width: 600;
    height: 600;

    Timer{
        interval: 300;
        running: true;
        repeat: true;
        onTriggered: {
            if(progressBar3.value >= 1)
                progressBar3.value = 0;
            progressBar3.value += 0.05;

            if(progressBar4.value >= 1)
                progressBar4.value = 0;
            progressBar4.value += 0.05;
        }

    }

    ProgressBar {
        id: progressBar3
        x: 83
        y: 226
        width: 397
        height: 23
        value: 0.01;
        style: ProgressBarStyle{
            id:progressBar3Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }

            progress: Rectangle{
                color: "#25b1e8";//
                clip: true;
                Rectangle{
                    anchors.left: parent.left;
                    //anchors.top: parent.top;
                    //anchors.bottom: parent.bottom;
                    height: progressBar3.width;
                    width: progressBar3.width;
                    LinearGradient{
                        anchors.fill: parent;
                        gradient: Gradient {
                            GradientStop {
                                position: 0.00;
                                color: "#ffffff";
                            }
                            GradientStop {
                                position: 1.00;
                                color: "#36d1e8";
                            }
                        }
                        start:Qt.point(0, 0);
                        end: Qt.point(parent.width, 0);
                    }
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar3Style.progress;
                }
            }
        }

    }

    ProgressBar {
        id: progressBar4
        x: 83
        y: 289
        width: 397
        height: 23
        value: 0.01;

        property color colorValue: Qt.rgba(37/255, 177/255, 232/255, 1);

        style: ProgressBarStyle{
            id:progressBar4Style;
            background: Rectangle{
                border.width: 1;
                border.color: control.hovered?"green":"#25b1e8";
                color:"lightgray";
            }

            progress: Rectangle{
                //color: "#25b1e8";//
                //color: Math.round(currentProgress*100);
                color: progressBar4.colorValue;
                onColorChanged: {
                    console.log("onColorChanged")
                }
            }

            panel: Item{
                implicitHeight: 20;
                implicitWidth: 200;

                Loader{
                    anchors.fill: parent;
                    sourceComponent: background;
                }

                Loader{
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.bottom: parent.bottom;
                    anchors.margins: 2;
                    width: currentProgress * (parent.width - 4)
                    sourceComponent: progressBar4Style.progress;

                    onWidthChanged: {
                        console.log("onWidthChanged")
                        progressBar4.colorValue = Qt.rgba(1-currentProgress, 1-currentProgress, 1-currentProgress, 1)
                    }
                }

                Text {
                    anchors.right: parent.right;
                    anchors.rightMargin: 5;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: Math.round(currentProgress*100) + "%";
                    color: "#25b1e8"
                }
            }
        }
    }

}
